var currentX = 0;
var currentY = 0;
var stepSize = 4;
var stepX = stepSize;
var stepY = stepSize;
var $fish;
var timerId = 0;
var endX = 0;
var endY = 0;

$(window).load(function() {
	init();
	addHandler();	
});

function init() {
	timerId = 0;
	$fish = $("#img");
	var $panel = $("#panel");
	endX = $panel.outerWidth() - $fish.width();
	endY = $panel.outerHeight() - $fish.height();
}

function addHandler() {
	$("#btnStart").on("click", function(){	start(); });
	$("#btnStop").on("click", function(){ stopMove(); });
}

function start() {
	if (timerId == 0) timerId = setInterval(startMove, 20);
}

function startMove() {
	currentX += stepX;
	currentY += stepY;

	if (currentX > endX) stepX = -stepSize;
	if (currentX < 0) stepX = stepSize;

	if (currentY > endY) stepY = -stepSize;
	if (currentY < 0) stepY = stepSize;

	$fish.css({
		left : currentX,
		top : currentY
	});
}

function stopMove() {
	if (timerId != 0) {
		clearInterval(timerId);
		timerId = 0;
	}
}